import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import Store from './store'
import { history } from 'umi'
import { Button } from 'antd-mobile'
import { QuestionTypeEnum } from './enum'
import { NoPicker } from './components/NoPicker'
import { RateQuestion } from './components/RateQuestion'
import { ShortAnswerQuestion } from './components/ShortAnswerQuestion'
import { MultiChoiceQuestion } from './components/MultiChoiceQuestion'
import { SingleChoiceQuestion } from './components/SingleChoiceQuestion'
import { TeacherRateQuestion } from './components/TeacherRateQuestion'
import { observer, useLocalObservable } from 'mobx-react'
import { QuestionTitle } from './components/Title'
import { YesNo } from '@/constant/enum'

export const EvaluateWrite = () => {
    const historyQuery = history.location.query as {
        groupId: string
        evaluateId: string
        listId: string
    }
    // 班级ID
    const groupId = Number(historyQuery.groupId)
    // 评估表ID
    const evaluateId = Number(historyQuery.evaluateId)
    // 表单ID
    const listId = Number(historyQuery.listId)

    const store = useLocalObservable(() => new Store(groupId, evaluateId, listId))

    return (
        <div className={styles.page}>
            <NavBar title="报告填写" />
            <div className={styles.main}>
                <div className={styles.headerBox}>{store.evaluateData?.name || '-'}</div>

                <div className={styles.noPickerBox}>
                    <NoPicker {...store} questionList={store.getQuestionList} />
                </div>

                <div className={styles.questionBox}>
                    {store.currentQuestion && (
                        <QuestionTitle
                            no={store.no + 1}
                            title={store.currentQuestion.name}
                            isRequired={store.currentQuestion?.is_answer === YesNo.Yes}
                        />
                    )}

                    {/* 单选题 */}
                    {store.currentQuestion?.category === QuestionTypeEnum.SingleChoice && (
                        <SingleChoiceQuestion
                            {...store}
                            question={store.currentQuestion}
                            answer={store.currentAnswer}
                        />
                    )}
                    {/* 多选题 */}
                    {store.currentQuestion?.category === QuestionTypeEnum.MultiChoice && (
                        <MultiChoiceQuestion
                            {...store}
                            question={store.currentQuestion}
                            answer={store.currentAnswer}
                        />
                    )}
                    {/* 问答题 */}
                    {store.currentQuestion?.category === QuestionTypeEnum.QA && (
                        <ShortAnswerQuestion
                            {...store}
                            question={store.currentQuestion}
                            answer={store.currentAnswer}
                        />
                    )}
                    {/* 评分题 */}
                    {store.currentQuestion?.category === QuestionTypeEnum.Rate && (
                        <RateQuestion
                            {...store}
                            question={store.currentQuestion}
                            getQuestionResult={store.getQuestionResult}
                        />
                    )}
                    {/* 培训师评分题 */}
                    {store.currentQuestion?.category === QuestionTypeEnum.TeacherRate && (
                        <TeacherRateQuestion
                            {...store}
                            question={store.currentQuestion}
                            getQuestionResult={store.getQuestionResult}
                        />
                    )}
                </div>

                <div className={styles.stepBox}>
                    {store.isAllAnswered && (
                        <Button className={styles.submit} onClick={store.submitAnswer}>
                            提交报告
                        </Button>
                    )}
                    {!store.isAllAnswered && (
                        <>
                            <Button
                                className={styles.prev}
                                disabled={store.isFirstQuestion}
                                onClick={store.prevQuestion}
                            >
                                上一题
                            </Button>
                            <Button
                                className={styles.next}
                                disabled={store.isLastQuestion}
                                onClick={store.nextQuestion}
                            >
                                下一题
                            </Button>
                        </>
                    )}
                </div>
            </div>
        </div>
    )
}

export default observer(EvaluateWrite)
